<template>
    <Layout>
        <Row>
            <Card dis-hover>
                <h3>
                    {{ taskInfo.taskName }}
                </h3>
                <ButtonGroup slot="extra" v-if="!taskInfo.viewFlag">
                    <Button @click="submit('showdata')" type="warning" style="background: #EF5350;" :loading="buttonloading1">
                        <Icon type="ios-bookmark"/>
                        审批
                    </Button>

                    <Button @click="returnTo">
                        返回
                        <Icon type="ios-arrow-forward"/>
                    </Button>
                </ButtonGroup>
                <ButtonGroup slot="extra" v-else>
                    <Button @click="returnTo">
                        返回
                        <Icon type="ios-arrow-forward"/>
                    </Button>
                </ButtonGroup>

            </Card>

            <i-col>
                <Card dis-hover style="margin-top: 10px">
                    <div :style="{ overflowY: 'auto'}">
                        <Col span="24">
                            <Form :model="showdata" ref="showdata" :rules="ruleCustom" :label-width="160">

                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='企业名称：' prop='companyId'>
                                            <div >{{showdata.companyName}}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11" v-if="showdata.adminTypeDesc">
                                        <FormItem label='管理员类型：' prop='adminType'>
                                            <div >{{ showdata.adminTypeDesc }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11" v-if="showdata.roleName">
                                        <FormItem label='角色：' prop='roleName'>
                                            <div >{{ showdata.roleName }}</div>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row v-if="showdata.applyType!=='edit'" type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11" v-if="showdata.applyType==='del'">
                                        <FormItem :label='"删除的"+(showdata.adminTypeDesc?"管理员":"人员")+"："' prop='adminUserIdBefore'>
                                            <div >{{ showdata.adminUserIdBeforeName }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11" v-else>
                                        <FormItem :label='(showdata.adminTypeDesc?"管理员":"人员")+"姓名："' prop='adminUserId'>
                                            <div >{{ showdata.adminUserName }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <!-- <FormItem label='审批人：' prop='applyUserId'>
                                            <div >{{ showdata.applyUserName }}</div>
                                        </FormItem> -->
                                    </Col>
                                </Row>

                                <Row v-if="showdata.applyType==='edit'" type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='变更前姓名：' prop='adminUserIdBefore'>
                                            <div >{{ showdata.adminUserIdBeforeName }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label='变更后姓名：' prop='adminUserId'>
                                            <div >{{ showdata.adminUserName }}</div>
                                        </FormItem>
                                    </Col>
                                </Row>
                               <!-- <Row v-if="showdata.applyType!=='add'" type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='审批人：' prop='applyUserId'>
                                            <div >{{ showdata.applyUserName }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11"></Col>
                                </Row> -->

                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='申请人：' prop='createUserName'>
                                            <div >{{ showdata.createUserName }}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label='填报时间：' prop='createDate'>
                                            <div >{{ renderViewDate(showdata.createDate) }}</div>
                                        </FormItem>
                                    </Col>
                                </Row>
                                
                                <Row v-if="!taskInfo.viewFlag">
                                    <Col span="11">
                                        <FormItem label="审批结果：" prop="route">
                                            <Select v-model="showdata.route" @on-change="routePush">
                                                <Option v-for="item in approveList" :value="item.value" :key="item.value">{{item.text }}
                                                </Option>
                                            </Select>
                                        </FormItem>
                                    </Col>

                                </Row>
                                <Row v-if="!taskInfo.viewFlag">
                                    <Col span="11">
                                        <FormItem label="处理意见：" prop="opinion">
                                            <Input v-model="showdata.opinion" type="textarea" :rows="2"/>
                                        </FormItem>
                                    </Col>
                                </Row>

                            </Form>
                        </Col>
                    </div>
                </Card>
            </i-col>
        </Row>
    </Layout>
</template>


<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage, cookie} from '../../../common/cacheUtils.js'
    import cascaderDom from "../../../components/cascader-dom.vue"
    import {formatDate} from "@/tools";

    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                user: {},
                taskInfo: {},
                uploadListVisible: [],
                uploadListPercent: [],
                fileUrl: Api.interestedPartiesUserFile,
                pageModel2: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                    contractorName: ''
                },
                options: {
                    disabledDate(date) {
                        return date && date.valueOf() <= Date.now();
                    },
                },
                contractor: [],
                pageSizeArray: [10, 20, 50],
                evaluationPeriodDate: [null, null],
                contractTermDate: [null, null],
                uploadList: [],
                evaluationPeriodDate1: null,
                contractTermDate1: null,
                viewFlag: false,
                flag: false,
                buttonloading1: false,
                approveFlag: '',
                approveList: [
                    {
                        text: "通过",
                        value: "1"
                    },
                    {
                        text: "不通过",
                        value: "2"
                    }
                ],
                showdata: {},
                tableHeight: 450,
                file: null,
                fileName: null,
                downloadUrl: Api.downloadMongoFile,
                formList: [],
                ruleCustom: {
                    opinion: [{
                        validator: (rule, value, callback) => {
                            if (this.showdata.opinion == undefined || this.showdata.opinion == null || this.showdata.opinion == '') {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    route: [
                        {required: true, message: '  ', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            let _this = this;
            if (this.$route.query.close == false) {
                this.$http.get(Api.getUserByUserId + this.$route.query.userId)
                    .then(function (res) {
                        _this.user = res.data.data;
                        _this.$http.get(Api.getTaskData + "/" + this.$route.query.procinstId + "/" +
                            _this.$route.query.taskId + "?close=" + this.$route.query.close).then(function (res1) {
                            this.taskInfo = res1.data;
                            if (res1.data.viewFlag == false)
                                _this.taskInfo.viewFlag = false;
                            else
                                _this.taskInfo.viewFlag = true;
                            _this.query();
                            return;
                        })
                    })
            } else {
                var search = window.location.href.split('?')[1];//截取URL？后面的参数
                var params = {};
                if (search != "" && search != undefined) {
                    search.split("&").forEach(
                        function (val) {
                            var arr = val.split("=");
                            params[arr[0]] = arr[1];
                        }
                    )
                }
                var code = params.code
                var status = params.status
                if (code != null && code != 'undefine') {
                    this.$http.get(Api.queryToken, {
                        params: {
                            code: code,
                        }
                    }).then(res1 => {
                        if (res1.data.errcode == "1014") {
                            this.$http.get(Api.getReZheng).then(res2 => {
                                window.location.href = decodeURIComponent(res2.bodyText) + "&redirect_uri=" + encodeURIComponent(window.location.href);
                            })
                        } else {
                            this.$http.get(Api.getUserByUserId + this.$route.query.userId)
                                .then(function (res) {
                                    this.user = res.data.data;
                                    this.$http.get(Api.getTaskData + "/" + this.$route.query.procinstId + "/" +
                                        this.$route.query.taskId + "?close=" + this.$route.query.close).then(function (res1) {
                                        this.taskInfo = res1.data;
                                        if (res1.data.viewFlag == false)
                                            this.taskInfo.viewFlag = false;
                                        else
                                            this.taskInfo.viewFlag = true;
                                        this.query();
                                        return;
                                    })
                                })
                        }
                    })
                } else {
                    this.$http.get(Api.getReZheng).then(res2 => {
                        window.location.href = decodeURIComponent(res2.bodyText) + "&redirect_uri=" + encodeURIComponent(window.location.href);
                    });
                }
            }
        },
        methods: {
            renderViewDate(date) {
                if (!date) return "";
                return formatDate(new Date(date), "yyyy-MM-dd");
            },
            returnTo() {
                if (this.taskInfo.close == true)
                    window.close();
                else
                    this.$router.go(-1);
            },
            routePush(value) {
                if (value === '1') {
                    this.showdata.opinion = "同意";
                } else {
                    this.showdata.opinion = null;
                }
            },

            query() {
                let url = Api.getRoleUserApply;
                let id = this.taskInfo.workId;
                let _this = this;
                this.$http.get(url + '/' + id, {params: {}}).then((res) => {
                    _this.showdata = res.data.data;
                    
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            submit() {
                this.$refs['showdata'].validate((valid) => {
                    if (valid) {
                        this.buttonloading1 = true;
                        let data = {};
                        data = {
                            createUserId: this.user.userId,
                            userName: this.user.userName,
                            opinion: this.showdata.opinion,
                            taskId: this.taskInfo.taskId,
                            workId: this.taskInfo.workId,
                            formKey: 'roleManagerUserApproval',
                            procinstId: this.taskInfo.procinstId,
                            route: this.showdata.route
                        };
                        this.$http.get(Api.taskComplete, {params: data}).then((res) => {
                            console.log(res)
                            this.buttonloading1 = false;
                            if (res.data.status == '200') {
                                this.$Message.success("审批成功")
                                this.returnTo();
                            } else {
                                this.$Message.success("审批失败")
                            }
                        }).catch(e => {
                            this.buttonloading1 = false;
                            this.$Message.error("数据获取失败")
                        })


                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
    }
</script>
<style lang='css' scoped>
    @import '../../../index.css';

</style>
